<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    给定义一个数组 [1, 3, 2]
    实现一个自运行函数，然后按照数组的元素顺序做延迟多少s，然后输入元素内容。执行效果如下

    延迟1s，输出1
    再延迟3s，输出3
    再延长2s，输入2

    请实现三种方式。

   -->

    <script>
      (function () {
        const arr = [1, 3, 2];

        /**
         * 方案三：
         *    递归
         */
        function next() {
          // 1. 获取 arr 的第一项
          const num = arr.shift();

          // 2. 判断
          if (num) {
            setTimeout(() => {
              console.log("num", num);
              // 执行递归
              next();
            }, num * 1000);
          }
        }

        next();

        /**
         * 方案二：
         *    使用 Promise
         *    1. 先创建一个按照约定事件 resolve 一个 sleep Promise函数
         *    2. 再创建一个 async 函数，内部 awiat sleep
         */
        // function sleep(time) {
        //   return new Promise((resolve) => {
        //     setTimeout(() => {
        //       resolve();
        //     }, time);
        //   });
        // }

        // async function main() {
        //   for (let i = 0; i < arr.length; i++) {
        //     await sleep(arr[i] * 1000);
        //     console.log(arr[i]);
        //   }
        // }

        // main();

        /**
         * 方案一：
         *    循环 arr，循环体中使用 setTimeout 做延迟
         * 
         *    for (var i = 0; i < arr.length; i++) {
                setTimeout(() => {
                  console.log("i", i); // 3
                  console.log(arr[i]);
                }, arr[i] * 1000);
              }

              问题1： 输出为 undefined, i 已经是 3 了     【使用 let 替换 var】
              问题2： 延迟是有问题的。原因是三次的setTimeout是同步启用的      【累加延迟时间】
         */

        // let time = 0;
        // for (let i = 0; i < arr.length; i++) {
        //   time += arr[i] * 1000;

        //   console.time(`hello${i}`);
        //   setTimeout(() => {
        //     console.log("i", i); // 3
        //     console.log(arr[i]);
        //     console.timeEnd(`hello${i}`);
        //   }, time);
        // }
      })();
    </script>
  </body>
</html>
